<!--
 * @Description: 
 * @Date: 2020-12-21 10:40:52
 * @LastEditors: lother
 * @LastEditTime: 2021-01-09 14:49:04
 * @FilePath: \AccountOpening-H5\src\views\examine\index.vue
-->
<template>
    <div>
        <l-header :sliderShow="false" :leftShow="false"></l-header>
        <div class="examine w89" :class="status==2?'on':''">
            <div v-if="status==2">
                <img src="@/assets/img/success.png" alt="">
                <h2>{{$t('examine.index.5636piwjhu80')}}</h2>
                <p>{{$t('examine.index.5636piwjj4g0')}}</p>
            </div>
            <div v-else-if="status==3">
                <img src="@/assets/img/load.png" alt="">
                <h2>{{$t('examine.index.5636piwjjfg0')}}</h2>
                <p>{{$t('examine.index.5636piwjjow0')}}</p>
                <van-button type="info" block class="next-step"  @click="$routerTo('verify')" v-if="[2,3].includes(legalize_type)">{{$t('examine.index.5636piwjjx00')}}</van-button>
            </div>
            <div v-else-if="status==4">
                <img src="@/assets/img/fail.png" alt="">
                <h2>{{$t('examine.index.5636piwjk680')}}</h2>
                <div class="left_fail">
                    <h3 class="size">{{$t('examine.index.5636piwjkeo0')}}</h3>
                    <p v-for="(item,ide) in  failFlow" :key="ide">{{ide+1}}.{{item['reason_'+langSuff]}}</p>
                    <van-button type="info" block class="next-step" @click="failClick" >{{$t('examine.index.5636piwjkn00')}}</van-button>
                </div>
            </div>
        </div>
        <div class="w89">
            <h2 class="title">{{$t('examine.index.5636qee723o0')}}:</h2>
            <ul class="stepsList">
                <li v-for="(item,index) in stepList" :key="index">
                    <h2>{{item.name}}</h2>
                    <p>{{item.title}}</p>
                    <router-link :to="item.href" v-if="item.href">{{$t('examine.index.5636piwjkvk0')}}</router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import {  statusGet  } from '@/api/allPage'
export default {
    computed:{
        langSuff(){
            return  this.$store.state.langSuff
        },
        stepList(){
            return [
                {
                    name:"Step 1",
                    title:this.$t('examine.index.5636piwjl3k0')+(this.terminal['terminal_'+this.langSuff]??''),
                    href:"download"
                },{
                     name:"Step 2",
                    title:this.$t('examine.index.5636piwjlbk0'),
                },{
                     name:"Step 3",
                    title:this.$t('examine.index.5636piwjljs0'),
                }
            ] 
        }
    },
    data() {
        return {
            status:null,  // 1:未开户，2已经开户(审核成功)，3待审核，4审核未通过，5待完善
            list:{},
            terminal:{},
            failFlow:[],
            value:'',
            legalize_type:0
        }
    },
    created(){
        this.statusList();
        localStorage.removeItem('page')
    },
    methods:{
        statusList(){
            statusGet()
            .then(res=>{
                // this.list = 
                if(res.code==1){
                    this.terminal = res.data.terminal??{};
                    this.status = res.data.status;
                    localStorage.setItem('userType',res.data.user_type)
                    this.failFlow = res.data.failFlow ?? []
                      this.legalize_type = res.data.legalize_type;
                    if(['1','5'].includes(String(this.status))){
                        this.$routerTo('documentType')
                    }
                }
            })
        },
        failClick(){
            localStorage.removeItem("pageId")
            localStorage.setItem('isModify',1)
            this.$pageFlow()
            .then(res=>{
                this.$page(res,'next')
            })
        }
    }
}
</script>
<style lang="less" scoped>
    .examine{
        text-align: center;
        padding-top: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid @sliderColor;
        img{
            max-width: 1.2rem;
        }
        h2{
            .size;
            padding:0.4rem 0 0.25rem;
        }
        p{
            .size;
            color: @placeColor;
        }
        .left_fail{
            padding:0.99rem 0 0 0;
            text-align: left;
            h3{
                padding-bottom: 0.2rem;
            }
            p{
                .size;
                color: @placeColor;
            }
        }
    }
    .examine.on{
        padding-top: .87rem;
        // padding-bottom: 0rem;
    }
    .stepsList{
        position: relative;
        margin:0.5rem 0.6rem;
        li{
            padding-left: 0.28rem;
            padding-bottom:0.55rem;
            position: relative;
            z-index: 2;
            h2{
                .size;
                font-size: 0.22rem;
                color: @placeColor;
                line-height: 0.3rem;
                padding-bottom: .1rem
            }
            a{
                display: inline-block;
                margin-top: 0.1rem ;
                background: @btnColor;
                line-height: 0.3rem;
                padding:0.14rem 0.26rem;
                border-radius: 3px;
                font-size: .22rem;
                color: @fff;
            }
            p{
                .size;
            }
        }
        li::after{
            width: 7px;
            height: 7px;
            content: '';
            position: absolute;
            top: 0.07rem;
            left: 0;
            background: @placeColor;
            border-radius: 200%;
            overflow: hidden;
        }
        li::before{
            position: absolute;
            height: 100%;
            box-sizing: border-box;
            content: ' ';
            pointer-events: none;
            left:3px;
            top: 0.1rem;
            border-left: 1px dashed @placeColor;
        }
        li:last-child::before{
            border-width: 0;
        }   
    }
</style>